<template>
	<view>
		<view class="function-box">
			<view class="function-item flexWrap">
				<view class="item-left flexWrapNo">
					头像
				</view>
				<view class="item-right flexWrapNo">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="head-img" :src="avatar"></image>
					</button>
					<text class="icon-more"></text>
				</view>
			</view>
			<view class="function-item flexWrap">
				<view class="item-left flexWrapNo">
					昵称
				</view>
				<view class="item-right flexWrapNo">
					<view class="input-box">
						<input placeholder="昵称" type="nickname" v-model="nickname" placeholder-class="placeholderClass"/>
					</view>
					<text class="icon-more"></text>
				</view>
			</view>
			<view class="function-item flexWrap">
				<view class="item-left flexWrapNo">
					手机号
				</view>
				<view class="item-right">
					{{mobile}}
					<text class="icon-more"></text>
				</view>
			</view>
		</view>
		<view class="btn" @tap="profile()">确认修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar:"",
				nickname:"",
				mobile:""
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			profile(){
				this.$request.post(this.$api.profile, {
					username:this.nickname,
					avatar:this.avatar
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('修改成功')
					}
				})
			},
			// 获取用户信息
			getUserInfo(){
				this.$request.post(this.$api.userInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.avatar=data.avatar
						this.nickname=data.nickname
						this.mobile=data.mobile
					}
				})
			},
			onChooseAvatar(e) {
				this.avatar = e.detail.avatarUrl
				this.uploadFilePromise(e.detail.avatarUrl)
			},
			uploadFilePromise(value) {
				console.log(value)
				let that = this
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let uploadUrl = this.$store.state.debug.getWay + this.$api.uploadImg
				uni.uploadFile({
					url: uploadUrl,
					filePath: value,
					fileType: "image",
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data).data
						console.log(data)
						that.avatar = data.fullurl
					},
					complete: res => {
						uni.hideLoading()
						console.log(res)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}
	button {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		line-height: 1;
		color: #FFFFFF;
		font-size: 28rpx;
		background: none;
		width: 100%;
		border: none;
	}
	.btn{
		width: 322upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		background:#FFB726;
		border-radius: 16upx;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin: auto;
		margin-top: 32upx;
	}
	.avatar-wrapper {
		border: 1upx solid #eee;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: auto;
	}
	.head-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.function-box{
		border-top: 3rpx solid #E3E3E3;
		margin-top: 42upx;
		padding: 30upx;
		.function-title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #111B3B;
			padding: 40rpx 36rpx;
		}
		.function-item{
			padding: 36rpx 0;
			position: relative;
			border-bottom: 3rpx solid #E3E3E3;
			.item-left{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #333;
				.item-icon{
					width: 36rpx;
					height: 36rpx;
					flex: none;
					margin-right: 17rpx;
				}
			}
			.item-right{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #333;
				.input-box{
					text-align: right;
				}
				.important{
					color: #FFB726;
				}
			}
			.icon-more{
				border-color:#6E6E6E;
				border-width: 4rpx;
				margin-left: 10upx;
			}
		}
	}
</style>
